import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0
import QtQuick.Layouts  1.3
import QmlGraphics 1.0

ApplicationWindow {
    id: mainWindow
    width: 640
    height: 480
    visible: true
    title: qsTr("QmlGraphicsView")

    QmlGraphicsView {
        id: navigable
        anchors.fill: parent
        clip: true
        dragEnabled: true

        Rectangle {
            id: selectionRect
            x: 0; y: 0
            width: 10; height: 10
            border.width: 2
            border.color: "#2E87F4"
            color: Qt.rgba(0.1804, 0.5294, 0.9568, 0.2)
            visible: false
        }
        rubberBandDragItem: selectionRect

        GraphicsRectItem {
            parent: navigable.scene
            view: navigable
            x: 100; y: 100
            width: 50; height: 25
            rectRadius: 8
            background: "lightblue"
        }
        GraphicsImageItem {
            parent: navigable.scene
            view: navigable
            x: 300; y: 100
            width: 120; height: 120
            source: "qrc:/qtcreator.png"
        }
        GraphicsRectItem {
            parent: navigable.scene
            view: navigable
            x: 300; y: 300
            width: 50; height: 25
            rectRadius: 8
            background: "green"
        }
        GraphicsTextItem {
            parent: navigable.scene
            view: navigable
            x: 100; y: 300
            width: 80; height: 25
            itemText: qsTr("TextItem")
            background: "yellow"
            color: "red"
        }
        Rectangle {
            anchors.right: navigable.right
            anchors.bottom: navigable.bottom
            width: 0.2 * parent.width
            height: 0.2 * parent.height
            opacity: 0.8
            border.width: 2
            border.color: "#000000"
            color: Qt.rgba(0, 0, 0, 0)
            GraphicsViewPreview {
                anchors.fill: parent; anchors.margins: 1
                source: navigable
                visible: true
            }
        }
    }

    RowLayout {
        anchors.top: mainWindow.top
        anchors.horizontalCenter: mainWindow.horizontalCenter
        width: mainWindow.width / 2
        Button {
            text: "Fit in view"
            onClicked: navigable.fitContentInView()
        }
    }
}
